import { lazy } from "react";
import { Navigate, createBrowserRouter } from "react-router-dom";
//三级路由
const Tbale = lazy(() => import("../pages/List/Table/Index"));
const Echarts = lazy(() => import("../pages/List/Echarts/Index"));
//二级路由
const Index = lazy(() => import("../pages/Index/Index"));
const List = lazy(() => import("../pages/List/List"));
const Love = lazy(() => import("../pages/Love/Love"));
//二级路由配置
export const homeRouter = [
  {
    path: "/MyLayout/Index",
    element: <Index></Index>,
    title: "首页",
  },
  {
    path: "/MyLayout/List/",
    element: <List></List>,
    title: "列表页",
    children: [
      {
        path: "Tbale",
        element: <Tbale></Tbale>,
        title: "文章列表",
      },
      {
        path: "Echarts",
        element: <Echarts></Echarts>,
        title: "图表",
      },
    ],
  },
  {
    path: "/MyLayout/Love",
    element: <Love></Love>,
    title: "❤",
  },
];
//递归渲染
const formRouter = (routers) => {
  return routers.map((router) => ({
    ...router,
    children: router.children ? formRouter(router.children) : undefined,
  }));
};
//一级路由
const MyLayout = lazy(() => import("../pages/MyLayout/MyLayout"));
const Login = lazy(() => import("../pages/Login/Login"));
const Error = lazy(() => import("../pages/404/Error"));
//一级路由配置
const router = createBrowserRouter([
  {
    path: "/",
    element: <Navigate to="/MyLayout/Index"></Navigate>,
  },
  {
    path: "/MyLayout",
    element: <MyLayout></MyLayout>,
    children: formRouter(homeRouter),
  },
  {
    path: "/Login",
    element: <Login></Login>,
  },
  {
    path: "*",
    element: <Error></Error>,
  },
]);
export default router;
